<template>
    <div>
		<div style="" class="floor-deco">
			<div v-for="img in actFloor.bannerImgs" :key="img"><img :src="img" alt=""/></div>
		</div>
		<van-list v-if="actList&&actList.length>0"
				  :finished="finished" v-model:loading="loading" v-model:error="error" error-text="请求失败，点击重新加载">
			<template #finished><van-divider>没有更多了</van-divider></template>
			<div class="mgb20" v-for="(act,i) in actList" :key="act.activityId" :ref="setBoxRef">
				<van-sticky offset-top="1.173333334rem" :container="boxRefs[i]">
					<ActBannerHead :themeColor="myColor" :endTime="act.endTime" :isActEnd="act.isActEnd"
								   :title="act.activityTheme" :typeName="act.typeName" :ruleContent="act.activityContent"/>
				</van-sticky>
				<ul class="gds-list" :id="'act_'+act.activityId">
					<ActGoodsItem v-for="gds in act.gdsList" :key="gds.gdsId" :item="gds" :cate="act.typeCategory" :themeColor="myColor"/>
				</ul>
			</div>
		</van-list>
		<van-empty v-else image="search" description="当前暂无精彩活动哦，敬请期待~" />
	</div>
</template>
<style lang="scss" scoped>
.floor-deco{
	margin-bottom:14px;
	&>div{width:100%;overflow:hidden; box-sizing: border-box; display: flex; flex-direction: column; align-content:center; align-items: center; flex-shrink: 0;}
	img{object-fit:cover;margin:0;width:calc(100vw * 1.8);}
}
.van-divider{color:var(--white-color);border-color:var(--white-color);}
:deep(.van-sticky--fixed .activity-banner){
	border-radius: 0 0 8px 8px; margin:0 0 10px 0; padding:0 10px;
}
.gds-list{display:block; margin: 0 10px 10px 10px; padding:0;}
</style>
<script lang="ts" setup>
import {ActFloor, ActInfo} from "@/types"

//data
const route =useRoute()
const myColor=ref(import.meta.env.VITE_THEME_COLOR) //当前楼层的主题色，默认商城主题色#ee5313;
const finished=ref(true)
const loading=ref(false)
const error=ref(false)
const {boxRefs,setBoxRef} = useBoxRefs()

//为了做演示，临时写死楼层主题色效果所用的颜色列（后期开发时需删除）:以下代码实际上是在服务端执行的
const colorKey={
	'11':'#7232dd', '22':'#0874FA', '33':'#e60027', '44':'#3AB882', '55':'#ED4D78', '66':'#EE5313', '77':'#e60027', '99':'#e60027',
}
//演示代码 end

const actFloor=ref(<ActFloor>{
	floorId: route.params.id,
	color: myColor.value,
	bannerImgs:[
		'https://gjusp.alicdn.com/img/img_1701312125780_78.png@1000y-0+ic_60Q.png_.webp',
		'https://gjusp.alicdn.com/img/img_1701223121161_19.png@1000y-0+ic_60Q.png_.webp'
	],//楼层展示活动前的宣传展示图，可多张顺序展示，紧贴无边距

})
const actList=ref(<Array<ActInfo>>[]) //楼层展示的活动详情（包括倒计时、每个活动内的商品），初始为空数组（异步读取，楼层基本信息读取完后，再取活动详情）
//继续演示：读取楼层基本信息后，根据floorId，获取绑定的有效活动（展示时间大于现在的）
actList.value.push({
	activityId:'string',
	activityTheme:'国庆满2999减200',
	typeCategory:'02',//活动优惠分类：01单品优惠 02订单优惠 03外围优惠;
	typeName:'联通看家',//活动类型名称
	activityContent:'活动内容：国庆满2999减200国庆满2999减200国庆满2999减200国庆满2999减200国庆满2999减200国庆满2999减200',
	endTime:'2024-3-31 23:50:59',
	isActEnd:false,
	gdsList:[
		{
			gdsId:'1254260',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:300, //已售量
			residueNum:520,//剩余量
		},
		{
			gdsId:'1254261',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:300, //已售量
			residueNum:820,//剩余量
		},
		{
			gdsId:'1254262',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:300, //已售量
			residueNum:920,//剩余量
		},
		{
			gdsId:'1254263',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:3000, //已售量
			residueNum:320,//剩余量
		},
		{
			gdsId:'1254264',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:3000, //已售量
			residueNum:20,//剩余量
		},
		{
			gdsId:'1254265',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:3000, //已售量
			residueNum:20,//剩余量
		},
		{
			gdsId:'1254266',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:3000, //已售量
			residueNum:20,//剩余量
		},
		{
			gdsId:'1254267',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:3000, //已售量
			residueNum:20,//剩余量
		},
	], //参与活动商品集合
})

actList.value.push({
	activityId:'number',
	activityTheme:'手机新品大酬宾',
	typeCategory:'01', //活动优惠分类：01单品优惠 02订单优惠 03外围优惠;
	typeName:'新品菜市',//活动类型名称
	activityContent:'活动内容：手机节赠品手机节赠品手机节赠品手机节赠品手机节赠品手机节赠品手机节赠品手机节赠品手机节赠品手机节赠品手机节赠品',
	endTime:'2024-4-21 23:50:59',
	isActEnd:false,
	gdsList:[
		{
			gdsId:'1254260',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:300, //已售量
			residueNum:820,//剩余量
		},
		{
			gdsId:'1254261',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:300, //已售量
			residueNum:720,//剩余量
		},
		{
			gdsId:'1254262',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:300, //已售量
			residueNum:620,//剩余量
		},
		{
			gdsId:'1254263',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:300, //已售量
			residueNum:120,//剩余量
		},
		{
			gdsId:'1254264',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:300, //已售量
			residueNum:220,//剩余量
		},
		{
			gdsId:'1254265',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:300, //已售量
			residueNum:20,//剩余量
		},
		{
			gdsId:'1254266',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:300, //已售量
			residueNum:20,//剩余量
		},
		{
			gdsId:'1254267',
			gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
			gdsImg:'https://cbu01.alicdn.com/img/ibank/O1CN01MWi9tA29CFhe6qxew_!!2215020858031-0-cib.310x310.jpg',
			beforePrice:300000,//活动前价格
			realPrice:280000,//活动中的提货价
			buysNum:3000, //已售量
			residueNum:20,//剩余量
		},
	], //参与活动商品集合
})

watch(
	() => route.params.id,
	(newVal,oldVal) => {
		if(oldVal!==newVal){
			let tmp = newVal as string
			myColor.value = colorKey[tmp as keyof typeof colorKey]||myColor.value
		}
	},{immediate:true}
)

</script>